<template>
	<el-dialog v-model="visible" :before-close="handleClose" :close-on-click-modal="false">
		<el-card>
			<el-cascader v-model="cascaderValue" :options="options" :props="cascaderProps" clearable @change="handleChange" />
		</el-card>
		<template #footer>
			<div>
				<el-button @click="handleClose">关闭</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch, onMounted } from 'vue'

const props = defineProps({
	modelValue: false
})

const cascaderProps = {
	expandTrigger: 'hover'
}

const visible = ref(false)
// const cascaderValue = ref([])
const cascaderValue = ref(['component', 'basic', 'layout'])

watch(
	() => props.modelValue,
	nval => {
		visible.value = nval
	}
)
const emit = defineEmits(['update:modelValue'])
const handleClose = () => {
	emit('update:modelValue', false)
}

const handleChange = value => {
	console.log(value)
	console.log('cascaderValue', cascaderValue.value)
}

const options = [
	{
		value: 'guide',
		label: 'Guide',
		children: [
			{
				value: 'disciplines',
				label: 'Disciplines',
				children: [
					{
						value: 'consistency',
						label: 'Consistency'
					},
					{
						value: 'feedback',
						label: 'Feedback'
					},
					{
						value: 'efficiency',
						label: 'Efficiency'
					},
					{
						value: 'controllability',
						label: 'Controllability'
					}
				]
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{
						value: 'side nav',
						label: 'Side Navigation'
					},
					{
						value: 'top nav',
						label: 'Top Navigation'
					}
				]
			}
		]
	},
	{
		value: 'component',
		label: 'Component',
		children: [
			{
				value: 'basic',
				label: 'Basic',
				children: [
					{
						value: 'layout',
						label: 'Layout'
					},
					{
						value: 'color',
						label: 'Color'
					}
				]
			},
			{
				value: 'form',
				label: 'Form',
				children: [
					{
						value: 'radio',
						label: 'Radio'
					},
					{
						value: 'checkbox',
						label: 'Checkbox'
					}
				]
			},
			{
				value: 'data',
				label: 'Data',
				children: [
					{
						value: 'table',
						label: 'Table'
					},
					{
						value: 'tag',
						label: 'Tag'
					}
				]
			},
			{
				value: 'notice',
				label: 'Notice',
				children: [
					{
						value: 'alert',
						label: 'Alert'
					},
					{
						value: 'loading',
						label: 'Loading'
					}
				]
			},
			{
				value: 'others',
				label: 'Others',
				children: [
					{
						value: 'dialog',
						label: 'Dialog'
					},
					{
						value: 'tooltip',
						label: 'Tooltip'
					}
				]
			}
		]
	},
	{
		value: 'resource',
		label: 'Resource',
		children: [
			{
				value: 'axure',
				label: 'Axure Components'
			},
			{
				value: 'sketch',
				label: 'Sketch Templates'
			},
			{
				value: 'docs',
				label: 'Design Documentation'
			}
		]
	}
]
</script>

<style scoped lang='scss'>
:deep(.el-cascader .el-input) {
	cursor: pointer;
	display: flex;
	width: 250px;
}
</style>